<template>
  <el-select v-model="value" placeholder="请选择区域">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.areaName"
      :value="item.areaCode"
    />
  </el-select>
</template>
<script>
import { defineComponent, computed, watch, ref, reactive } from "vue";

import { getArea } from "@/api/dict";
export default defineComponent({
  name: "AreaSelect",
  props: {
    data: {
      type: String,
      default: "",
    },
  },
  emits: ['update:data'],
  setup(props, { emit }) {
    const value = computed({
      get: () => props.data,
      set: (val) => emit("update:data", val),
    })
    const options = ref([]);

    const getProvince = async (para) => {
      const res = await getArea(para);
      // console.log(res)
      options.value = res.data;
    };
    getProvince();
    return {
      value,
      options
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-table) thead th {
  background: #f2f3f5;
  color: #333;
}
.pagination-container {
  padding-top: 20px;
  text-align: right;
  min-height: 48px;
}
.pagination-container.hidden {
  display: none;
}
.el-pagination {
  padding: 0;
}
.tag {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  width: 40px;
  text-align: center;
  font-size: 12px;
  border-radius: 2px;
  &.blue {
    color: #5573e4;
    background: rgba(85, 115, 228, 0.1);
    border: 1px solid rgba(85, 115, 228, 0.6);
  }
  &.yellow {
    color: #f7b500;
    background: rgba(247, 181, 0, 0.1);
    border: 1px solid rgba(247, 181, 0, 0.6);
  }
}
</style>